<template>
  <!-- 案件服务 -->
  <div>
    <div>
      <div class="contnetTop_box" :style="{
        background: `url(${getAssetsImages('bg-img')}) no-repeat`,
        'background-size': '100%',
      }">
        <div class="head-box h-360 Mian">
          <div class="contnetTop">
            <div class="center_close">
              <span class="contnetTop_title">甄选专业律师</span>
              <span class="contnetTop_info">全流程代理案件 轻松解决法律纠纷困扰</span>
            </div>
            <div class="mar-t20">
              <el-button color="#0052d9">立即咨询</el-button>
            </div>
          </div>
        </div>
      </div>

      <div style="background: #fff">
        <div class="contnet-box Mian">
          <div class="search-ipt mar-t35">
            <el-space :size="size" :spacer="spacer">
              <div class="dropdown">
                <el-dropdown>
                  <div class="flex-a">
                    <div class="mar-r0 w-50">长沙市</div>
                    <el-icon>
                      <ArrowDown size="12" />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>长沙市</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="case">案件服务</div>
              <div class="dropdown">
                <el-dropdown>
                  <div class="flex-a">
                    <div class="mar-r0 w-80">选择服务项</div>
                    <el-icon>
                      <ArrowDown size="12" />
                    </el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>长沙市</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div>
                <div class="input-label flex gap-4">
                  <span>姓名</span>
                  <div>
                    <el-input v-model="input1" style="width: 200px" placeholder="请输入姓名" />
                  </div>
                </div>
              </div>
              <div>
                <div class="input-label flex gap-4">
                  <span>手机</span>
                  <div>
                    <el-input v-model="input1" style="width: 200px" placeholder="请输入联系方式" />
                  </div>
                </div>
              </div>
            </el-space>
          </div>
          <div class="search-btn">
            <el-button type="primary" color="#0048D4">立即咨询</el-button>
          </div>
        </div>
        <!-- 优选律师 -->
        <lawyerCarousel />
        <!--诉讼案件 -->
        <div style="background: #f2f5f9">
          <div class="padlr320 Mian">
            <div class="lawsuit_main">
              <div class="lawsuit_title">诉讼案件</div>
              <div class="lawsuit_content">
                <div class="suit_content">
                  <!-- 三角形 -->
                  <div class="triangle"></div>
                  <div class="suit_title">主诉案件</div>
                  <div class="suit_title1">我是原告</div>
                </div>
                <div class="buit_content">
                  <div class="buit_title">被诉案件</div>
                  <div class="buit_title1">我是被告/第三人</div>
                </div>
              </div>
              <div class="cardMain">
                <!-- :class="index === 2 ? 'cardMainBG' : ''" -->
                <el-card v-for="(item, index) in 6" :key="index">
                  <template #header>
                    <div class="card-header">
                      <div class="card-title">商标行政诉讼</div>
                      <div>
                        <el-icon color="#0048D4" size="20">
                          <Right />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                  <div>
                    <div class="card-info">
                      甄选专业律师全流程代理案件，轻松解决法律纠纷困扰
                    </div>
                    <div class="card-price">
                      <span>￥2500.00</span>
                      <span>/件起</span>
                    </div>
                  </div>
                  <template #footer>
                    <div class="card-footer">
                      <div class="consult">
                        <span>咨询客服</span>
                      </div>
                      <div class="buy">
                        <span>立即购买</span>
                      </div>
                    </div>
                  </template>
                </el-card>
              </div>
            </div>
          </div>
        </div>
        <div style="background: #fff">
          <div class="padlr320 Mian">
            <div class="NoLitigation">
              <div class="NoLitigation_title">非诉案件</div>
              <div class="cardMain">
                <el-card v-for="(item, index) in 4" :key="index" :class="index === 2 ? 'cardMainBG' : ''">
                  <template #header>
                    <div class="card-header">
                      <div class="card-title">商标行政诉讼</div>
                      <div>
                        <el-icon color="#0048D4" size="20">
                          <Right />
                        </el-icon>
                      </div>
                    </div>
                  </template>
                  <div>
                    <div class="card-info">
                      甄选专业律师全流程代理案件，轻松解决法律纠纷困扰
                    </div>
                    <div class="card-price">
                      <span>￥2500.00</span>
                      <span>/件起</span>
                    </div>
                  </div>
                  <template #footer>
                    <div class="card-footer">
                      <div class="consult">
                        <span>咨询客服</span>
                      </div>
                      <div class="buy">
                        <span>立即购买</span>
                      </div>
                    </div>
                  </template>
                </el-card>
              </div>
            </div>
          </div>
          <!-- 维权 -->
          <div class="padlr320 Mian">
            <div class="safeguardMain">
              <div class="safeguard_title">维权打假</div>
              <div class="cardMain">
                <el-card shadow="always" v-for="(item, index) in 3" :key="index">
                  <div class="safeguard_content">
                    <div>
                      <el-image style="width: 406px; height: 150px"
                        src="https://pic.imgdb.cn/item/65fc18e49f345e8d03756f8c.png" :fit="fit"></el-image>
                    </div>
                    <div class="safeguard_info">
                      <div class="safeguard_info_title1">
                        <span>线下打假维权</span>
                      </div>
                      <div class="safeguard_info_title2">
                        <span>甄选专业律师全流程代理案件，轻松解决法律纠纷困扰</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </div>
      <serviceProcess />
      <div style="background: #fff">
        <superiority></superiority>
      </div>
      <DetailsCs></DetailsCs>
    </div>
  </div>
</template>

<script setup>
import { h, ref, reactive, computed } from "vue";
import { ElDivider } from "element-plus";
import superiority from "@/components/lawyer/superiority.vue";
import DetailsCs from "@/components/lawyer/details.vue";
import serviceProcess from "@/components/lawyer/serviceProcess.vue";
import lawyerCarousel from "@/components/lawyer/lawyerCarousel.vue"

const size = ref(30);
const spacer = h(ElDivider, { direction: "vertical" });
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
const getAssetsImages1 = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
// const getAssetsImages2 = name => {
//   return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
// };

const masking = reactive([
  {
    title: "专属顾问咨询",
    sotr: "01",
  },
  {
    title: "提交订单",
    sotr: "02",
  },
  {
    title: "签订代理协议",
    sotr: "03",
  },
  {
    title: "匹配专业律师出具意见",
    sotr: "04",
  },
  {
    title: "准备材料，提交立案",
    sotr: "05",
  },
  {
    title: "法院受理",
    sotr: "06",
  },
  {
    title: "开庭审理",
    sotr: "07",
  },
  {
    title: "裁判结案",
    sotr: "08",
  },
]);
// const zeroFill = num => {
//   return num < 10 ? `0${num}` : num
// }
const activeName = ref("first");
</script>

<style lang="scss" scoped>
.Mian {
  width: 1920px !important;
  margin: 0 auto;
}

.head-box {
  padding: 100px 200px;
}

.contnetTop {
  position: absolute;
  // left: 50px;
  margin-left: 150px;

  .center_close {
    width: 520px;

    .contnetTop_title {
      width: 520px;
      height: 112px;
      font-size: 40px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: left;
      color: #0052d9;
      line-height: 56px;
    }

    .contnetTop_info {
      font-size: 35px;
    }
  }

  .el-button {
    width: 140px;
    height: 44px;

    // background: #0052d9;
    // border-radius: 4px;
    // width: 64px;
    // height: 22px;
    span {
      font-size: 18px;
      font-family: PingFang TC, PingFang TC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #ffffff;
      line-height: 22px;
    }
  }
}

.contnet-box {
  width: 100%;
  // margin: 0 80px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  // width: 1300px;

  .case {
    // width: 64px;
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #222426;
    line-height: 23px;
  }

  .search-ipt {
    // width: 100%;
    width: 1150px;
    height: 64px;
    background: #ffffff;
    border: 1px solid #1752d9;
    border-radius: 4px 0px 0px 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .dropdown {
      // width: 100px;
      line-height: 10px;
      text-align: center;
    }

    .input-label {
      display: flex;
      align-items: center;

      // margin-top: 10px;
      span {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #222426;
        line-height: 23px;
      }
    }
  }

  .search-btn {
    width: 160px;
    height: 64px;
    background: #0052d9;
    border-radius: 0px 4px 4px 0px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #ffffff;
    // line-height: 55px;

    .el-button {
      width: 160px;
      height: 64px;
    }
  }
}

:deep(.el-input__wrapper) {
  border: none !important;
  box-shadow: none !important;
  padding: 0px; //前边边距去掉
}

.lawyerModule {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .lawyerModule_title {
    margin: 50px 0 20px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #181818;
    line-height: 50px;
  }

  .carousel {
    width: 1450px;
    height: 100%;
    // .el-carousel {
    //   padding: 0 80px;

    //   .el-carousel-item {
    //     padding: 0 80px;
    //   }
    // }
    .carousel_Card {
      width: 298px;
      // height: px;
      height: 374px;
      // background: linear-gradient(180deg, #f0f3f7, #ffffff);
      // border: 2px solid #ffffff;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
    }

    .card_box {
      // padding: 0 50px;
      display: flex;
      // justify-content: space-around;
      justify-content: center;
      align-items: center;
    }

    .carousel_Card_Info {
      // width: 298px;
      height: 130px;
      display: flex;
      background-color: #fff;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // padding: 30px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      .lawyer {
        margin-top: 20px;
        width: 197px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #646770;
        line-height: 22px;
      }

      .name {
        width: 72px;
        height: 22px;
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .carousel_Card_Info_issue {
      color: #fff;
      // margin-bottom: -45px;
      position: relative;
      top: -10px;
      height: 150px;
      display: flex;
      background-color: #004cd1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // padding: 30px;
      border-radius: 5px;
      padding: 0;

      // margin: 0;
      .button_info {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        line-height: 27px;

        .sendMessages {
          width: 96px;
          height: 30px;
          background: #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.5);
          cursor: pointer;

          span {
            width: 36px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #0052d9;
            line-height: 17px;
          }
        }

        .entrust {
          width: 60px;
          height: 30px;
          border: 1px solid #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.5);
          cursor: pointer;

          span {
            width: 24px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #ffffff;
            line-height: 17px;
          }
        }

        .details {
          width: 60px;
          height: 30px;
          border: 1px solid #ffffff;
          border-radius: 2px;
          box-shadow: 0px 2px 8px 0px rgba(213, 218, 227, 0.5);
          cursor: pointer;

          span {
            width: 24px;
            height: 17px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #ffffff;
            line-height: 17px;
          }
        }
      }

      .Card_Info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .lawyer {
          margin-top: 20px;
          width: 197px;
          height: 22px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: center;
          color: #fff;
          line-height: 22px;
        }

        .name {
          width: 72px;
          height: 22px;
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #fff;
          line-height: 22px;
        }
      }
    }

    .carousel_but {
      margin: 40px 0 50px 0;

      .el-button {
        width: 140px;
        height: 44px;
        // background: #0052d9;
        border-radius: 4px;

        span {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang TC, PingFang TC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #ffffff;
          line-height: 22px;
        }
      }
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

:deep(.el-carousel__container) {
  height: 400px !important;
}

:deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
}

.lawsuit_main {
  // margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #f2f5f9;

  .lawsuit_title {
    margin: 40px 0 40px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #181818;
    line-height: 50px;
  }

  .lawsuit_content {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid #004cd1;

    .suit_content {
      display: flex;
      width: 640px;
      height: 39px;
      background: #0052d9;
      justify-content: center;
      align-items: center;
      position: relative;

      .triangle {
        width: 50px;
        height: 100%;
        position: absolute;
        // background: #F0F3F8;
        top: 0;
        bottom: 0;
        right: 0px;
        // width: 0;
        // height: 0;
        background: #f0f3f8;
        clip-path: polygon(100% 100%, 100% 0%, 0% 0%);
        /* 设置底部为红色 */
      }

      .suit_title {
        width: 80px;
        height: 32px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ffffff;
        line-height: 32px;
      }

      .suit_title1 {
        margin-left: 10px;
        width: 56px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #ffffff;
        line-height: 22px;
      }
    }

    // width: 100%;
    .buit_content {
      display: flex;
      width: 640px;
      height: 39px;
      justify-content: center;
      align-items: center;

      .buit_title {
        width: 80px;
        height: 32px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #202020;
        line-height: 32px;
      }

      .buit_title1 {
        margin-left: 10px;
        width: 105px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }
  }


  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    margin-bottom: 50px;

    // padding: 0 320px;
    // margin: 0 180px;


    .el-card {
      width: 406px;
      height: 200px;
      margin: 15px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card-header {
      display: flex;
      justify-content: space-between;

      .card-title {
        width: 96px;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-info {
      // padding: 10px;
      width: 336px;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #7c7c7e;
      line-height: 22px;
    }

    .card-price {
      margin-top: 20px;

      :nth-child(1) {
        width: 91px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #f66a38;
        line-height: 32px;
      }

      :nth-child(2) {
        width: 35px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-footer {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      height: 63px;
      align-items: flex-end;
      // text-emphasis: none;
      text-align: center;
      line-height: 40px;

      .consult {
        width: 203px;
        height: 40px;
        background: #759fe7;
        border-radius: 0px 0px 0px 4px;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }

      .buy {
        width: 203px;
        height: 40px;
        background: #004cd1;
        border-radius: 0px 0px 4px 0px;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }
  }

  :deep(.el-card__footer) {
    padding: 0 !important;
  }

  :deep(.el-card__body) {
    padding: 0px 20px;
  }

  :deep(.el-card) {
    --el-card-border-color: #fff;
  }
}

.cardMainBG {
  background: url("@/assets/serviceImgs/fssaj.png") no-repeat !important;
  background-size: 100% 100%;
}

.NoLitigation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // background: #F2F5F9;

  .NoLitigation_title {
    margin: 60px 0 10px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #181818;
    line-height: 50px;
  }

  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    // padding: 0 320px;
    // margin: 0 180px;

    .el-card {
      width: 289px;
      height: 218px;
      margin: 15px 15px;
      background: #F0F2F7;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // background: url('@/assets/serviceImgs/service-bg1.png') no-repeat;
      // background-size: 100% 100%;
    }

    .card-header {
      display: flex;
      justify-content: space-between;

      .card-title {
        width: 96px;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-info {
      width: 242px;
      height: 44px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
    }

    .card-price {
      margin-top: 20px;

      :nth-child(1) {
        width: 91px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ff4600;
        line-height: 32px;
      }

      :nth-child(2) {
        width: 35px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #202020;
        line-height: 22px;
      }
    }

    .card-footer {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      height: 63px;
      align-items: flex-end;
      // text-emphasis: none;
      text-align: center;
      line-height: 40px;
      // padding: 0 1px;

      .consult {
        width: 203px;
        height: 40px;
        background: #759fe7;
        border-radius: 0px 0px 0px 4px;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }

      .buy {
        width: 203px;
        height: 40px;
        background: #004cd1;
        border-radius: 0px 0px 4px 0px;
        // padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }
  }

  :deep(.el-card__footer) {
    padding: 0 !important;
  }

  :deep(.el-card__body) {
    padding: 0px 20px;
  }

  :deep(.el-card) {
    --el-card-border-color: #f0f3f8;
  }
}

.safeguardMain {
  :deep(.el-card__body) {
    padding: 0px !important;
  }

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  // background: #F2F5F9;
  .safeguard_title {
    margin: 60px 0 10px 0;
    width: 112px;
    height: 50px;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
    line-height: 50px;
  }

  .cardMain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1300px;
    margin-bottom: 40px;

    .el-card {
      width: 406px;
      height: 270px;
      margin: 15px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .safeguard_content {
      width: 406px;
      background: #f2f5f8;
      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
      border-radius: 5px;

      .safeguard_info {
        // width: 100%;
        padding: 10px 10px 30px 15px;

        .safeguard_info_title1 {
          width: 96px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: left;
          color: #202020;
          line-height: 22px;
        }

        .safeguard_info_title2 {
          margin: 10px 0px;
          width: 336px;
          height: 22px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #575966;
          line-height: 22px;
        }
      }
    }
  }
}



:deep(.el-card__header) {
  border-bottom: none;
}

:deep(.el-card__footer) {
  border-top: none;
}
</style>
